<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-container>
    <el-aside width="250px">
      <div style="width: 250px;background-color: #e8e8e8">
        <img style="vertical-align: middle; width: 250px; height: 80px " src="imgs/111.jpg">
        <el-menu background-color="#0096dc"
                 text-color="#fff"
                 active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title" >核心业务处理</template>
            <el-menu-item index="1-1">车库收费</el-menu-item>
            <el-menu-item index="1-2">物业费缴纳</el-menu-item>
            <el-menu-item index="1-3">水电费缴纳</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">客户管理</template>
            <el-menu-item index="2-1">管理客户信息</el-menu-item>
            <el-menu-item index="2-2">未定</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">客户业务处理</template>
            <el-menu-item index="3-1">投诉处理</el-menu-item>
            <el-menu-item index="3-2">维修保障</el-menu-item>
            <el-menu-item index="3-3">未定</el-menu-item>
          </el-submenu>
        </el-menu>

      </div>
    </el-aside>
    <el-container>
      <el-header height="80px" style="background-color: #0aa1ed;"  >
        <div style="width: 1200px;">
          <h1>
          <el-breadcrumb separator="/"
                         style="float: left; font-size: 22px;
                         padding-top: 10px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>未定</el-breadcrumb-item>
            <el-breadcrumb-item>未定</el-breadcrumb-item>
          </el-breadcrumb>
          <span style="float: right">
                    欢迎XXX回来
                    <a href="">退出登录</a>
                </span>
          </h1>
        </div>
      </el-header>
      <el-main>
        <el-table v-if="currentIndex=='1-1'"
                  :data="carArr"
                  style="width: 100%">
          <el-table-column type="index" label="编号"></el-table-column>
          <el-table-column prop="name" label="用户名称"></el-table-column>
          <el-table-column prop="to" label="用户手机"></el-table-column>
          <el-table-column prop="carid" label="车牌信息"></el-table-column>
          <el-table-column prop="price" label="收费"></el-table-column>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="success"
                      @click="">缴纳</el-button>
              <el-button
                      size="mini"
                      type="warning"
                      @click="">催款</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="categoryDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        currentIndex:"1-1",
        activeName: 'second',
        carArr:[{id:1,name:"罗伯特",to:"1396544685",carid:"沪A0000",price:"123123"}],
      }
    },
    methods:{
      categoryDelete(i,c){
        v.categoryArr.splice(i,1);
        v.$message.success("成功删除"+c.name+"分类!");
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  })
</script>
</html>